<template>
  <div id="homepage" class="homepage">
    <div class="sidenav">
      <div class="sidetitle">
        <img src="./assets/icon/title-2.png" alt="">
        <h1>Smart Care</h1>
      </div>
      <div class="sidecontent">
         <nav>
          <router-link to="/" class="nav-item" exact-active-class="nav-active" >
            <img src="./assets/icon/iconicon/仪表盘.png" alt="">仪表盘
          </router-link>
          <router-link to="/dangerBoard" class="nav-item" :class="{ 'nav-active': $route.path.startsWith('/dangerBoard') || $route.path.startsWith('/dangerDetail') }">
            <img src="./assets/icon/iconicon/告警-2.png" alt="">告警异常
          </router-link>
          <router-link to="/rootCauseAnalysis" class="nav-item" exact-active-class="nav-active">
            <img src="./assets//icon/根因分析.png" alt="">根因分析
          </router-link>
          <router-link to="/scanBoard" class="nav-item" exact-active-class="nav-active">
            <img src="./assets/icon/iconicon/全盘扫描.png" alt="">漏洞扫描
          </router-link>
          <router-link to="/aiChating" class="nav-item" exact-active-class="nav-active">
            <img src="./assets/icon/AI聊天.png" alt="">智能运维助手
          </router-link>
          <router-link to="/shellChating" class="nav-item" exact-active-class="nav-active">
            <img src="./assets/icon/iconicon/shell.png" alt="">Shell对话窗口
          </router-link>
          <router-link to="/systemLogin" class="nav-item" exact-active-class="nav-active">
            <img src="./assets/icon/设置.png" alt=""> 系统配置
          </router-link>
        </nav>
      </div>
     
    </div>
    <!-- Main content area -->
    <div :class="['main-content', {'no-padding': $route.name === 'aiChating' }]" :key="$route.fullPath">
      <router-view/>
    </div>
  </div>
</template>
<script setup>
import { onBeforeUnmount } from 'vue';
import { useWsStore } from './stores/wsStore';
const store = useWsStore();

onBeforeUnmount(() => {
  store.socket.value?.disconnect();
});
</script>
<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box
}
.homepage {
  display: flex;
  flex-direction: row;
  height: 100vh;
}   
.sidenav {
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  height: 100%;
  background-color: #fff;
  padding: 20px 15px;
  border-top-right-radius: 35px;
  border-bottom-right-radius: 35px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.sidetitle {
  margin-top: 50px;
  margin: 0 auto;
  width: 230px;
  height: 50px;
  text-align: center;
}
.sidetitle img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  vertical-align: middle;
}
.sidetitle h1 {
  display: inline-block;
  font-size: 30px;
  margin-top: 10px;
  text-align: center;
  font-weight: 800;
  color: rgb(0, 81, 255);
  vertical-align: middle;
}
.sidecontent {
  margin-top: 20px;
  width: 220px;
  padding: 0 10px;
}
.sidecontent .nav-item {
  display: block;
  padding-left: 30px;
  color: rgb(0, 81, 255);
  text-decoration: none;
  font-size: 18px;
  border-radius: 25px;
  width: 200px;
  text-align: left;
  height: 60px;
  margin-bottom: 20px;
  line-height: 60px;
  font-weight: 700;
}
.sidecontent .nav-item:hover {
  cursor: pointer;
}
.sidecontent .nav-item img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  vertical-align: middle;
}
.nav-active {
  background-color: rgb(236, 245, 255);
  /* color: #fff !important; */

}
.main-content {
  margin-left: 260px; /* Adjust based on the width of the sidenav */
  padding: 20px 40px;
  flex-grow: 1;
  overflow: auto;
}
.main-content.no-padding{
  padding: 0 0 0 40px;
}
@media screen and (max-width: 750px) {
  .sidenav {
    width: 80px;
    padding: 10px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .sidetitle {
    display: none; /* 隐藏标题部分 */
  }
  .sidecontent {
    width: 100%;
    padding: 0;
  }
  .sidecontent .nav-item {
    width: 60px;
    height: 60px;
    padding: 0;
    text-align: center;
    font-size: 12px;
    line-height: 1.2;
    margin-bottom: 10px;
  }
  .sidecontent .nav-item img {
    width: 30px;
    height: 30px;
    margin: 0 auto;
    display: block;
  }
  .main-content {
    margin-left: 80px; /* 调整主内容区域的左边距 */
  }
}
</style>